{% extends 'base.html' %}
{% load staticfiles %}
{% block title %}
首页
{% endblock %}
{% block content %}
<link href="{% static 'css/home.css' %}" rel="stylesheet">
<script src="{% static 'js/jqthumb.min.js' %}"></script>
<!--广告横幅-->
<!--轮播组件使用样式类carousel slide进行声明，data-ride="carousel"用来设定该组件的形式为轮播，data-interval="5000"设置每张图像的显示时间,单位是毫秒-->
<div id="ad" class="carousel slide" data-ride="carousel" data-interval="5000">
    <ol class="carousel-indicators">
        <!--绑定轮播索引-->
        <li data-target="#ad" data-slide-to="0" class="active"></li>
        <!--data-slide-to设置每张图片的轮播标号-->
        <li data-target="#ad" data-slide-to="1"></li>
        <li data-target="#ad" data-slide-to="2"></li>
    </ol>
    <div class="carousel-inner">
        <!--carousel-inner实现每张图像的内容显示-->
        <div class="item active">
            <img src="{% static 'img/banner1.jpg' %}" alt="广告横幅1">
        </div>
        <div class="item">
            <img src="{% static 'img/banner2.jpg' %}" alt="广告横幅2">
        </div>
        <div class="item">
            <img src="{% static 'img/banner3.jpg' %}" alt="广告横幅3">
        </div>
    </div>
    <!--left carousel-control用于控制左右侧的图片切换功能-->
    <a class="left carousel-control" href="#ad" data-slide="prev"><span
            class="glyphicon glyphicon-chevron-left"></span></a>
    <a class="right carousel-control" href="#ad" data-slide="next"><span
            class="glyphicon glyphicon-chevron-right"></span></a>
</div>
<!--主体内容-->
<div class="container">
    <div class="row row-3">
        <div class="col-md-4">
            <!--企业概况-->
            <span class="part1">
                <!--用来设置样式-->
                <a href="{% url 'aboutApp:survey' %}">企业概况</a>
            </span>
            <span class="part1 en">
                &nbsp;&nbsp;/ About Us
            </span>
            <div class="line1">
                <div class="line2 theme"></div>
            </div>
            <div style="margin-top:20px;">
                <img class="img-responsive" src="{% static 'img/aboutCompany.jpg' %}">
                <p class="text1">
                    恒达科技有限企业，位于中国某高新技术产业开发区,
                    以社会公共安全领域为主要应用方向，提供极速、准确和防伪装的人脸识别产品。
                </p>
            </div>
        </div>
        <div class="col-md-8">
            <!--新闻动态-->
            <span class="part1">
                <a href="#">新闻动态</a>
            </span>
            <span class="part1 en">
                &nbsp;&nbsp;/ News
            </span>
            <a class="btn btn-default btn-xs more-btn" href="{% url 'newsApp:news' 'company' %}">
                +&nbsp;更多
            </a>
            <div class="line1">
                <div class="line2 theme"></div>
            </div>
            <div class="col-md-5">
                <div id="myCarousel" class="carousel slide" data-ride="carousel">
                    <ol class="carousel-indicators nav-point">
                        {% for post in postList %}
                        <!--用模板标签来表示展报从0开始-->
                        <li data-target="#myCarousel" data-slide-to="{{forloop.counter0}}" {% if forloop.first %}
                            class="active" {% endif %}>
                            <!--添加active属性使得第一幅海报可以启动；用模板标签判断当前海报迭代是否是第一以-->
                        </li>
                        {% endfor %}
                    </ol>
                    <!-- 轮播（Carousel）项目 -->
                    <div class="carousel-inner" style="margin-top:15px;">
                        {% for post in postList %}
                        <div {% if forloop.first %} class="item active" {% else %} class="item" {% endif %}
                            style="background-size:cover;">
                            <a href="{% url 'newsApp:newDetail' post.id %}">
                                <!--轮播组件缩略图所在-->
                                <img src="{{post.photo.url}}" class="img-responsive" onload="DrawImage(this)"></a>
                            <div class="carousel-caption nav-title">{{post.title}}</div>
                        </div>
                        {% endfor %}
                    </div>
                </div>
            </div>
            <div class="col-md-7">
                <ul class="list-unstyled list-new">
                    {% for mynew in newList %}
                    <li>
                        <a href="{% url 'newsApp:newDetail' mynew.id %}">
                            {{mynew.title|truncatechars:"15"}}</a>
                        <span>【{{mynew.publishDate|date:"Y-m-d"}}】</span>
                    </li>
                    {% endfor %}
                </ul>
            </div>
        </div>
    </div>
    <div class="row row-3">
        <div class="col-md-4">
            <!--通知公告-->
            <!-- 通知公告 -->
            <span class="part1">
                <a href="#">通知公告</a>
            </span>
            <span class="part1 en">
                &nbsp;&nbsp;/ Public Release
            </span>
            <a class="btn btn-default btn-xs more-btn" href="{% url 'newsApp:news' 'notice' %}">
                +&nbsp;更多
            </a>
            <div class="line1">
                <div class="line2 theme"></div>
            </div>
            <div>
                <img class="img-responsive" src="{% static 'img/note.jpg' %}">
                <ul class="list-unstyled list-new">
                    {% for note in noteList %}
                    <li>
                        <a href="{% url 'newsApp:newDetail' note.id %}">
                            {{note.title|truncatechars:"25"}}
                        </a>
                        <a href="{% url 'newsApp:newDetail' note.id %}" class="public-detail">
                            查看详情>>
                        </a>
                    </li>
                    {% endfor %}
                </ul>
            </div>
        </div>
        <div class="col-md-4">
            <!--科研基地-->
            <span class="part1">
                <a href="{% url 'scienceApp:science' %}">科研基地</a>
            </span>
            <span class="part1 en">
                &nbsp;&nbsp;/ Technology Center
            </span>
            <div class="line1">
                <div class="line2 theme"></div>
            </div>
            <div>
                <a href="{% url 'scienceApp:science' %}">
                    <img class="img-responsive" src="{% static 'img/ky.jpg' %}">
                </a>
                <p class="text1">
                    <font color="#d30a1c">恒达科技科研基地</font>
                    恒达科研基地分为计算机视觉、 机器人和视觉深度学习三个事业部，共拥有高级研发人员近30名，
                    以各领域高级工程师和知名院校博士为主体的多层次研发梯队。当前，科研基地优秀的技术团队
                    已为恒达在人脸识别、物联网平台搭建、机器人导航等 领域打下了坚实基础
                </p>
            </div>
        </div>
        <div class="col-md-4">
            <!--联系我们-->
            <span class="part1">
                <a href="{% url 'contactApp:contact' %}">联系我们</a>
            </span>
            <span class="part1 en">
                &nbsp;&nbsp;/ Contact us
            </span>
            <div class="line1">
                <div class="line2 theme"></div>
            </div>
            <div>
                <ul class="list-unstyled procurement-li">
                    <li>业务质询一：111-XXXXXX</li>
                    <li>业务质询二：222-XXXXXX</li>
                    <li>咨询电话：0111-XXXXXX</li>
                    <li>企业传真：0222-XXXXXX</li>
                    <li>地址：某某某新区某某大道1号</li>
                    <li>邮编：XXXXXX</li>
                    <li>
                        网址：<a href="http://python3web.com">http://python3web.com</a>
                    </li>
                </ul>
                <div class="platform"><a href="{% url 'contactApp:contact' %}">详情</a></div>
            </div>
        </div>
    </div>
    <div class="row row-3">
        <!--产品中心-->
        <div class="col-md-12 col-pro">
            <span class="part1">
                <a href="{% url 'productsApp:products' 'robot' %}">产品中心</a>
            </span>
            <span class="part1 en">
                &nbsp;&nbsp;/ Products
            </span>
            <a class="btn btn-default btn-xs more-btn" href="{% url 'productsApp:products' 'robot' %}">
                +&nbsp;更多
            </a>
            <div class="line1" style="margin-bottom:5px;">
                <div class="line2 theme"></div>
            </div>
            <div class="col-md-12 col-pro">
                <div id="Carousel" class="carousel slide" style="margin-bottom:30px">
                    <ol class="carousel-indicators" style="display:none;">
                        <li data-target="#Carousel" data-slide-to="0" class="active"></li>
                    </ol>
                    <div class="carousel-inner">
                        <div class="item active">
                            <div class="row">
                                {% for product in productList %}
                                <div class="col-md-3 pro-images">
                                    <a href="{% url 'productsApp:productDetail' product.id %}" class="thumbnail">
                                        {% for img in product.productImgs.all %}
                                        {% if forloop.first %}
                                        <img src="{{img.photo.url}}" alt="产品图片" class="img-responsive"
                                            onload="DrawImage(this)">
                                        {% endif %}
                                        {% endfor %}
                                    </a>
                                    <div class="carousel-caption nav-title">{{product.title}}</div>
                                </div>
                                {% endfor %}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row row-3">
        <!--友情链接-->
        <div class="col-md-12 col-pro">

        </div>
    </div>
</div>
<script>
    //处理缩略图
    function DrawImage(hotimg) {
        $(hotimg).jqthumb({
            width: '100%', // 宽度
            height: '220px', // 高度
            zoom: '1', // 缩放比例
            method: 'auto' // 提交方法，用于不同的浏览器环境，默认为‘auto’
        });
    }
</script>
{% endblock %}